import React, { useEffect, useRef, useState } from 'react'
import {useNavigate} from 'react-router-dom'
import './index.scss'
import { Progress } from 'antd';

export default function NotFound() {

  
  //倒计时
  let timer:any=null
  let [num,setNum]=useState<number>(0)
  const timeDown=()=>{
    timer=setInterval(()=>{
      if(num<100){
        setNum(num+=1)
      }
      else{
        clearInterval(timer)
        timer=null
        gotoWhere('/login')
      }
    },100)
  }

  //跳转
  const navigate=useNavigate()
    const gotoWhere=(url:string)=>{
        navigate(url)
    }
  //点击跳转

  

  useEffect(()=>{
    timeDown()
    //跳转后销毁
    return()=>{
      clearInterval(timer)
      timer=null
    }
  },[])
  
  
  return (
    <div className='notfound'>

        <div className='notfound_img'>
            <img src={require('../../assets/images/404.png')} alt="" />
        </div>
    
       <div
       style={{cursor: 'pointer'}}
       onClick={()=>gotoWhere('/login')}
       >
            <Progress type="circle" percent={num} width={70}/>
       </div>


    </div>
  )
}
